<template>
	<div id="app" class="app">
		<md-form-module :model="form" :rules="rules" inline label-width="100px" is-track >
			<md-form-module-item label="名称" prop="name" help-msg="输入名称" label-width="80px" show-one-error inline-error>
				<input v-model="form.name" style="width: 100%;box-sizing: border-box; height: 32px; line-height: 32px;" id="input" name="input">
			</md-form-module-item>
			<md-form-module-item label="AAA" prop="checkbox">
				<input type="checkbox"/>122
			</md-form-module-item>
			<md-form-module-item label="textarea">
				<textarea rows="4"/>
			</md-form-module-item>
			<md-form-module-item label="app" prop="list.0.app" :rules="appRules">
				<input v-model="form.list[0].app">
			</md-form-module-item>
			<md-form-module-item>
				<button type="submit" style="width: auto">提交</button>
			</md-form-module-item>
		</md-form-module>
	</div>
</template>

<script>

export default {
	name: 'App',
	data() {
		return {
			form: {
				name: '12222',
				list: [
					{
						app: '1.230.2'
					}
				]
			},
			rules: {
				name: [
					'required',
					{type: 'integer', message: '必须输入integer'},
					{type: 'min', params: 12},
					{ message: '自定义错误信息', validator: ({data, value}) => parseInt(value) === 0}
				],
				checkbox: ['required', 'Boolean']
			},
			appRules: [
				'required',
				{type: 'integer', message: '必须输入integer'},
				{type: 'min', params: 12},
				{ message: '自定义错误信息', validator: ({data, value}) => parseInt(value) === 0}
			]
		};
	}
};
</script>

<style>
.app {
	height: 900px;
	overflow: auto;
	padding: 10px;
}
</style>
